<!-- <template>
  <el-form
    :model="ruleForm"
    status-icon
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="密码" prop="pass">
      <el-input
        type="password"
        v-model="ruleForm.pass"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="checkPass">
      <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off">
      </el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model.number="ruleForm.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template> -->
<template>
  <div id="app">
    <div class="background">
      <div class="overlay"></div>
      <el-container
        style="
          height: 100vh;
          justify-content: center;
          align-items: center;
          z-index: 99;
        "
      >
        <el-card>
          <h2 style="text-align: center">登录</h2>
          <el-divider></el-divider>
          <el-form
            :model="ruleForm"
            ref="ruleForm"
            label-width="80px"
            :rules="rules"
          >
            <!-- <el-form-item label="用户名" prop="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]"> -->
            <el-form-item label="用户名" prop="username">
              <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <!-- <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"> -->
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                class="login-button"
                type="primary"
                @click="handleLogin('ruleForm')"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
      </el-container>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
import axios from "../js/axios.js";
export default {
  data() {
    const phoneValidator = (rule, value, callback) => {
      const reg = /^1[3-9]\d{9}$/;
      if (!reg.test(value)) {
        return callback(new Error("手机号格式错误"));
      }
      callback();
    };

    const validatePassword = (rule, value, callback) => {
      const hasNumber = /[0-9]/.test(value);
      const hasLetter = /[a-zA-Z]/.test(value);

      if (!hasNumber || !hasLetter) {
        callback(new Error("密码需同时包含数字和字母"));
      } else {
        callback();
      }
    };

    // var validatePass = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("请输入密码"));
    //   } else {
    //     if (this.ruleForm.checkPass !== "") {
    //       this.$refs.ruleForm.validateField("checkPass");
    //     }
    //     callback();
    //   }
    // };

    return {
      ruleForm: { username: "", password: "" },
      rules: {
        username: [
          { validator: phoneValidator },
          { required: true, message: "请填写正确手机号", trigger: "blur" },
        ],
        password: [
          { validator: validatePassword },
          { required: true, message: "密码为数字加字母", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleLogin(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          const config = {
            headers: { "Content-Type": "application/json" },
            timeout: 1000,
          };
          // axios.get("http://localhost:3000/all", config)
          axios
            .get("/all", config)

            .then((response) => {
              console.log("我究竟拿到值了吗");
              console.log(response[0]);
            })
            .catch((error) => {
              console.error("Error fetching data:", error);
            });
          // axios.get('/all')
          //   .then(response => {
          //     console.log(response.data);
          //     console.log("111");
          //   }).catch(error => {
          //     console.log("888");
          //     console.log(error);
          //   });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>


<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin: 0;
}

.background {
  background-image: url("../assets/6e3.png");
  /* 替换为你的科幻背景图片链接 */
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  /* 调整透明度 */
  z-index: 1;
  /* 确保覆盖层在背景图上 */
}

.el-divider {
  margin: 20px 0;
  z-index: 2;
  /* 确保分隔线在前面 */
}

.login-button {
  transition: background-color 0.3s, transform 0.3s;
  z-index: 2;
  /* 确保按钮在前面 */
}

.login-button:hover {
  background-color: #409eff;
  /* 悬停时的背景颜色 */
  transform: scale(1.05);
  /* 悬停时的缩放效果 */
}
body{
  font-size: $redchat;
}
</style>